<template>
  <div id="main-all">
    <div class="shopmain-wrap">
      <div class="shopmain-wrap-box" v-for="(item, index) in shoplist" @click="detals(item.id)">
        <div class="shopmain-wrap-title">
          <img :src="item.image"/>
          <!-- <img src="../../assets/text.jpg" /> -->
          <p class="title1">{{ item.title }}</p>
          <p class="price1">
            {{ item.xianjia }} <s>￥{{ item.yuanjia }}</s>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["shoplist"],
  name: "mains",
  data() {
    return {};
  },
  mounted() {},
  methods: {
    detals(id) {
      // 点击传参
       this.$router.push({path:'/shopdetal',query:{ids:id}});
      // window.open(routeData.href, "_blank");
    },
  },
};
</script>

<style lang="scss" scoped>
.shopmain-wrap {
  width: 1164px;
  min-height: 500px;
  margin: 90px auto;
  display: flex;
  flex-wrap: wrap;
  .shopmain-wrap-box {
    margin: 30px 0px;
    width: 380px;
    height: 353px;
    display: flex;
    justify-content: center;
    .shopmain-wrap-title {
      .title1 {
        text-align: center;
        margin: 10px 0 0 0;
        font-size: 18px;
        color: rgb(99, 98, 98);
      }
      .price1 {
        text-align: center;
        font-weight: bold;
        color: #ef3c36;
        font-size: 18px;
        s {
          color: #acabab;
        }
      }
    }
    img {
      width: 285px;
      height: 285px;
    }
  }
}
</style>
